<route lang="jsonc" type="page">{
  "layout": "tabbar",
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "我的"
  }
}</route>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/store'

const userInfo = computed(() => useUserStore().userInfo as any)
const userStore = useUserStore()
console.log(userInfo.value, 'userInfouserInfo')
const menuList = ref([
  { icon: 'contact', name: '企业资料', toUrl: '/pages-sub/userInfo/companyAudit' },
  // { icon: 'headphones', name: '我的客服', toUrl: '' },
  // { icon: 'email', name: '意见反馈', toUrl: '' },
  { icon: 'wallet', name: '银行账户', toUrl: '/pages-sub/userInfo/bankCard' },
  { icon: 'auth', name: '实名认证', toUrl: '/pages-sub/userInfo/authentication' },
  { icon: 'gear', name: '退出登录', toUrl: '' },
])

onShow(() => {
  if (!userInfo.value.access_token) {
    uni.reLaunch({
      url: '/pages/login',
    })
    return
  }
  if (userInfo.value.role == 100) {
    menuList.value = [{ icon: 'gear' as const, name: '退出登录', toUrl: '' }]
  }
  else {
    menuList.value = [
      { icon: 'contact', name: '企业资料', toUrl: '/pages-sub/userInfo/companyAudit' },
      { icon: 'wallet', name: '银行账户', toUrl: '/pages-sub/userInfo/bankCard' },
      { icon: 'auth', name: '实名认证', toUrl: '/pages-sub/userInfo/authentication' },
      { icon: 'gear', name: '退出登录', toUrl: '' },
    ]
  }
})

function goUrl(item) {
  // 处理退出登录
  if (item.name === '退出登录') {
    uni.showModal({
      title: '提示',
      content: '确定要退出登录吗？',
      success: async (res) => {
        if (res.confirm) {
          try {
            // 调用退出登录方法，清空本地数据
            await userStore.logout()

            // 清空所有本地存储数据
            uni.clearStorageSync()

            // 显示退出成功提示
            uni.showToast({
              title: '退出成功',
              icon: 'success',
              duration: 1500,
            })

            // 延迟跳转到登录页
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/login',
              })
            }, 1500)
          }
          catch (error) {
            console.error('退出登录失败:', error)
            uni.showToast({
              title: '退出失败，请重试',
              icon: 'error',
            })
          }
        }
      },
    })
    return
  }
  console.log(item)

  // 处理其他页面跳转
  if (item.toUrl) {
    uni.navigateTo({ url: item.toUrl })
  }
}
</script>

<template>
  <view class="container">
    <wd-navbar placeholder safe-area-inset-top custom-style="background-color: #fb953b !important;" :bordered="false" />
    <!-- 个人信息 -->
    <view class="profile-section">
      <view class="flex items-center">
        <image class="h-16 w-16 rounded-full"
          src="https://jialegy.oss-cn-hangzhou.aliyuncs.com/common/e3512f56-94fa-11f0-ad1e-5254008d666f.png" />
        <view class="ml-4">
          <view class="text-lg font-bold">
            {{ userInfo.name }} - {{ userInfo.telephone }}
          </view>
          <view class="text-sm">
            <text v-if="userInfo.city">{{ userInfo.city }} -</text> {{ userInfo.role_name }}
          </view>
        </view>
      </view>
      <!-- <view class="mt-4 flex justify-around">
        <view class="text-center">
          <wd-icon name="view-module" size="30"></wd-icon>
          <view class="text-3.5 font-700 mt-1">借款记录</view>
        </view>
        <view class="text-center">
          <wd-icon name="list" size="30"></wd-icon>
          <view class="text-3.5 font-700 mt-1">还款记录</view>
        </view>
      </view> -->
    </view>

    <!-- 常用功能 -->
    <view class="menu-section">
      <view class="mb-4 text-lg font-bold">
        常用功能
      </view>
      <view class="grid grid-cols-4 gap-4">
        <view v-for="item in menuList" :key="item.name" class="text-center" @click="goUrl(item)">
          <uni-icons :type="item.icon as any" size="30" color="#fb953b" />
          <view class="mt-1 text-3.5 text-[#ccc]">
            {{ item.name }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style>
page {
  background-color: #f6f6f6;
}
</style>

<style lang="scss" scoped>
.profile-section {
  background-color: #fb953b;
  padding: 1.5rem;
  color: white;
}

.menu-section {
  background-color: white;
  padding: 1.5rem;
}
</style>
